<!--
	作者：lsd
	时间：2020-2-13
	描述：供方计划管理
-->

<template>
	<div class="m-view-supplierPlan m-window">
		<!-- 搜索头 -->
		<div class="m-condition">
			<el-row :gutter="5">
				<el-form
					:model="formSearch"
					ref="formSearch"
					label-width="70px"
					:inline-message="true"
					label-position="left"
				>
					<el-col :span="6">
						<el-form-item label="供应商" class="rightItem">
							<el-input
								value-key="id"
								v-model="formSearch.supplierName"
								placeholder="请输入供应商"
								clearable
								maxlength="20"
							></el-input>
						</el-form-item>
					</el-col>
				</el-form>
				<el-col :span="2" :offset="formSearch.state?12:10">
					<el-checkbox @change="search" v-model="formSearch.state">显示停用</el-checkbox>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" @click="search">查询</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" v-show="!formSearch.state" @click="editBtnClick(0)">新增</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" v-show="formSearch.state" @click="changeState(1)">启用</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" v-show="!formSearch.state" @click="changeState(0)">停用</el-button>
				</el-col>
			</el-row>
		</div>

		<!-- 表单 -->
		<div class="m-agTable m-bottom" v-loading="loading">
			<agGridComponents
				ref="agGridComponent"
				:getGridOptions="gridOptions"
				:getColumnDefs="columnDefs"
				:getRowSelection="'multiple'"
				:isColFit="true"
			></agGridComponents>
		</div>

		<!-- 页脚 -->
		<div class="m-page">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.current"
				:page-sizes="[30,50,100,150,200 ]"
				:page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.total"
			></el-pagination>
		</div>

		<!-- 新增&编辑窗口 -->
		<el-dialog
			:title="titleDia"
			:visible.sync="showDia"
			width="60"
			v-dialogDrag
			:before-close="handleClose"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
		>
			<el-form
				:model="formEdit"
				v-loading="loadingDia"
				ref="formEdit"
				label-width="100px"
				class="demo-ruleForm"
				:rules="rules"
			>
				<el-form-item label="供应商" prop="supplierCode">
					<el-select
						v-model="formEdit.supplierCode"
						filterable
						clearable
						@clear="supplierOptions=allSupplier"
						:filter-method="filterSupplier"
						placeholder="请选择供应商"
					>
						<el-option
							v-for="item in optionsCompanyName"
							:key="item.id"
							:label="item.supplierName"
							:value="item.supplierCode"
						>
							<span style="float: left">{{ item.supplierName }}</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.supplierCode }}</span>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelClick()">取消</el-button>
				<el-button type="primary" @click="save(false)" :loading="loadingDia">保存</el-button>
				<el-button type="primary" @click="save(true)" :loading="loadingDia">保存并继续</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import _Api from "@/api";
import localeText from "@/i18n/agGridText";
import agGridComponents from "@/components/agGridComponents.js";

export default {
	components: {
		agGridComponents,
	},
	data () {
		return {
			formSearch: {//查询表
				supplierName: '',
				state: false,
			},
			formEdit: {//编辑&新增表
				supplierCode: '',
				id: '',
			},
			optionsCompanyName: [],
			isEdit: false,//true为编辑,false为新增
			rowData: [], // 表格数据
			//表格参数
			gridOptions: '',
			columnDefs: [],
			//页脚参数
			pageInfo: {
				pageSize: 30,
				total: 0,
				current: 1,
			},
			//弹窗参数
			showDia: false,
			titleDia: '',
			//加载参数
			loading: false,//页面的
			loadingDia: false,//弹框的
			rules: {
				supplierCode: [{
					required: true,
					trigger: ['blur', 'change'],
					message: "不能为空",
				}],
			},
			allSupplier: []
		}
	},
	beforeMount () {
		this.gridOptions = {
			context: {
				componentParent: this
			},
			enableColResize: true,
			localeText: localeText,
			suppressRowClickSelection: true,//单元格选中,false为选中整行
		};
		this.columnDefs = [
			{				headerName: "供应商编码", field: "supplierCode", width: 200,
				checkboxSelection: true,
				headerCheckboxSelection: true			},
			{ headerName: "供应商名称", field: "supplierName", width: 200 },
		];

	},
	mounted () {
		//初始化pageSize
		this.pageInfo.pageSize = 30;
		this.search();
	},
	methods: {
		// 筛选供应商
		filterSupplier (value) {
			if (value != '') {
				this.optionsCompanyName = this.allSupplier.filter(item => item.supplierCode.indexOf(value) > -1 || item.supplierName.indexOf(value) > -1)
			} else {
				this.optionsCompanyName = this.allSupplier
			}
		},
		//查询 
		search () {
			this.loading = true;
			let param = {
				supplierName: this.formSearch.supplierName,
				pageSize: this.pageInfo.pageSize,
				currentPage: this.pageInfo.current,
				state: this.formSearch.state ? 1 : 0,
			};
			_Api
				.searchSupplierPlan(param)
				.then(res => {
					this.loading = false;
					if (res.data.code == 1) {
						this.rowData = res.data.rows;
						this.pageInfo.total = res.data.total
						this.$refs.agGridComponent.gridOptions.api.setRowData(this.rowData);
					} else {
						this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
					}
				})
				.catch(err => {
					this.loading = false;
					this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
				});
		},

		//停用&启用 0停用,1启用
		changeState (val) {
			let row = this.$refs.agGridComponent.gridOptions.api.getSelectedRows();
			if (row.length <= 0) {
				this.$alert("提示：请选择需要停用的供应商", {
					showClose: false,
					confirmButtonText: "确定",
					customClass: "alertPrompt"
				});
				return;
			}

			//取出id
			let idList = [];
			for (let i = 0; i < row.length; i++) {
				idList.push(row[i].id)
			}

			let param = {
				ids: idList
			}
			this.$confirm(`是否${this.formSearch.state ? '启用' : '停用'}该供应商`, "消息提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				distinguishCancelAndClose: true
			}).then(() => {
				this.loading = true;
				_Api
					.changeSupplierPlanState(param)
					.then(res => {
						this.loading = false;
						if (res.data.code == 1) {
							this.$message({
								message: `${this.formSearch.state ? '启用' : '停用'}成功！`,
								type: "success"
							});
							this.search();//刷新
						} else {
							this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
						}
					})
					.catch(err => {
						this.loading = false;
						this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
					});
			})
		},

		//新增&编辑 0新增,1编辑
		editBtnClick (val) {
			if (val == 1) {//编辑
				//单选操作
				let row = this.$refs.agGridComponent.gridOptions.api.getSelectedRows();
				this.isEdit = true;
				if (row.length <= 0) {
					this.$alert("提示：请选择需要编辑的供应商", {
						showClose: false,
						confirmButtonText: "确定",
						customClass: "alertPrompt"					});
					return;
				}
				else if (row.length > 1) {
					this.$alert("提示：请选择一个供应商", {
						showClose: false,
						confirmButtonText: "确定",
						customClass: "alertPrompt"					});
					return;
				} else {//正戏开始      
					this.optionsCompanyName = [{ supplierName: row[0].supplierName, supplierCode: row[0].supplierCode }]
					this.formEdit.supplierCode = row[0].supplierCode;
					this.formEdit.id = row[0].id;
				}
			}
			else {//新增
				this.isEdit = false;
				this.getCompanyNameList();//获取公司名字列表
				this.clearForm();//清空表单
			}
			this.titleDia = val == 0 ? '新增供应商计划' : '编辑供应商计划';
			this.showDia = true;
		},

		//保存&保存并继续
		save (continueFlag) {
			this.$refs['formEdit'].validate((valid) => {
				if (valid) {
					this.loadingDia = true;
					let param = {
						supplierCode: this.formEdit.supplierCode,
					}
					if (this.isEdit) { //编辑操作时传修改人
						param.id = this.formEdit.id;
						param.modifyerId = this.$global.user.id;
						param.modifyer = this.$global.user.employeeName//创建人
					}
					else {//新增时传创建人
						param.creatorId = this.$global.user.id;
						param.creator = this.$global.user.employeeName//创建人
					}

					_Api
						.saveSupplierPlan(param)
						.then(res => {
							this.loadingDia = false;
							if (res.data.code == 1) {
								this.$message({ message: "保存成功", type: "success" });
								this.search()//刷新数据
								this.clearForm();//清空表单
								if (!continueFlag) {//保存并继续
									this.showDia = false;
								}
							} else {
								this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
							}
						})
						.catch(err => {
							this.loadingDia = false;
							this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
						});
				}
			})
		},

		//获取公司名字列表
		getCompanyNameList () {
			this.loadingDia = true;
			_Api
				.getSupplierList()
				.then(res => {
					this.loadingDia = false;
					if (res.data.code == 1) {
						this.optionsCompanyName = res.data.rows;
						this.allSupplier = res.data.rows;
					} else {
						this.$alert(res.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
					}
				})
				.catch(err => {
					this.loadingDia = false;
					this.$alert(err.data.info, { showClose: false, confirmButton: "确定", customClass: "alertFailure" });
				});
		},

		//弹框取消按钮
		cancelClick () {
			this.showDia = false;
			this.clearForm();//清空表单
		},

		//表单清空
		clearForm () {
			if (this.$refs["formEdit"] != null) {
				this.$refs.formEdit.resetFields();
				// this.$refs.formEdit.clearValidate();
			}

		},

		//一页显示的总条数发送变化时触发
		handleSizeChange (val) {
			this.pageInfo.pageSize = val;
			this.search();
		},

		//页数变化时
		handleCurrentChange (val) {
			this.pageInfo.current = val;
			this.search();
		},

		//弹窗关闭前
		handleClose () {
			this.showDia = false;
		}
	}
}
</script>